<template>
  <div class="pls-notice">
    <div class="pls-notice-inner pc">
      <span class="pls-notice-tag">腾讯云公告</span>
      <span class="pls-notice-content">
        腾讯云严厉打击电信网络诈骗行为，欢迎通过举报平台提供线索，共护清朗网络空间
      </span>
      <a
        href="https://cloud.tencent.com/announce/detail/2036"
        class="pls-notice-link"
        >查看详情</a
      >
    </div>
  </div>
</template>

<script setup lang="ts">
// 这里不需要额外的逻辑，可以直接在模板中使用
</script>

<style lang="less">
.pls-notice {
  height: 54px;
  background: #3d485d;
  padding: 0 20px;
  color: #fff;
  .pls-notice-inner {
    margin: 0 auto;
    display: flex;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    height: 100%;
    white-space: nowrap;
    .pls-notice-tag {
      position: relative;
      height: 22px;
      padding: 0 8px;
      background: #0052d9;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 22px;
      border-radius: 2px;
      border-bottom-right-radius: 0;
      margin-right: 20px;
    }
    .pls-notice-tag:after {
      content: "";
      position: absolute;
      left: 100%;
      bottom: 0;
      border-style: solid;
      border-width: 3px 4px;
      border-color: transparent transparent #0052d9 #0052d9;
    }
    .pls-notice-content {
      max-width: calc(100vw - 180px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pls-notice-link {
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      font-size: 14px;
      margin-left: 12px;
    }
    .pls-notice-link::after {
      display: inline-block;
      width: 6px;
      height: 10px;
      margin-left: 6px;
      overflow: hidden;
      vertical-align: 0;
      background-image: url(https://cloudcache.tencent-cloud.com/qcloud/portal/kit/images/slice/link-arrow.1ebc4b26.svg);
      transition: -webkit-transform 0.4s;
      transition: transform 0.4s;
      transition: transform 0.4s, -webkit-transform 0.4s;
      transition: transform 0.4s, -webkit-transform 0.4s;
      content: "";
    }
  }
  .pls-notice-inner.mobile {
    display: none;
  }
  .pls-notice-inner {
    margin: 0 auto;
    display: flex;
    vertical-align: top;
    align-items: center;
    justify-content: center;
    height: 100%;
    white-space: nowrap;
  }
}
</style>
